import { AllHTMLAttributes, createElement, type FC } from 'react';
import classNames from 'classnames';

import { listDefaultProps } from './defaultProps';
import type { ListOptions } from './type';
import ListItem from './ListItem';
import ListContent from './ListContent';
import ListHeader from './ListHeader';
import ListDescription from './ListDescription';
import ListIcon from './ListIcon';
import ListList from './ListList';

export interface ListProps extends ListOptions, Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'size'> {}

interface ListInterface extends FC<ListProps> {
  Item: typeof ListItem;
  Content: typeof ListContent;
  Header: typeof ListHeader;
  Description: typeof ListDescription;
  Icon: typeof ListIcon;
  List: typeof ListList;
}

const List: ListInterface = (props) => {
  const {
    className,
    as,
    divided,
    relaxed,
    bulleted,
    horizontal,
    ordered,
    suffixed,
    link,
    inverted,
    aligned,
    selection,
    animated,
    celled,
    size,
    children,
    forwardedRef,
    ...listProps
  } = props;

  return createElement(
    as!,
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        aligned,
        { aligned, inverted, divided, bulleted, horizontal, ordered, suffixed, link, selection, animated },
        relaxed,
        { relaxed, celled },
        size,
        'list',
        className,
      ),
      ...listProps,
    },
    children,
  );
};

List.displayName = 'List';
List.defaultProps = listDefaultProps;

List.Item = ListItem;
List.Content = ListContent;
List.Header = ListHeader;
List.Description = ListDescription;
List.Icon = ListIcon;
List.List = ListList;

export default List;
